<template>
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <Auth :value="'btn.add'">
                    <el-button size="small" type="primary" class="ml10" @click="onRowAdd">新增</el-button>
                </Auth>
            </div>
            <el-table :data="pager.records" stripe style="width: 100%">
                <el-table-column prop="num" type="index" show-overflow-tooltip></el-table-column>
                <el-table-column prop="equName" label="设备名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="equSn" label="设备串号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="nickName" label="所属单位" show-overflow-tooltip></el-table-column>
                <el-table-column prop="cTime" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="path" label="操作" width="90">
                    <template #default="scope">
                        <!--                        <el-col>-->
                        <!--                            <Auth :value="'btn.edit'">-->
                        <!--                                <el-button size="mini" type="text" @click="onRowUpdate(scope.row)">修改</el-button>-->
                        <!--                            </Auth>-->
                        <!--                        </el-col>-->
                        <!--                        <el-col>-->
                        <!--                            &nbsp;&nbsp;&nbsp;&nbsp;-->
                        <!--                        </el-col>-->
                        <el-col>
                            <Auth :value="'btn.del'">
                                <el-button size="mini" type="text" @click="onRowDel(scope.row)">删除</el-button>
                            </Auth>
                        </el-col>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="onHandleSizeChange"
                    @current-change="onHandleCurrentChange"
                    class="mt15"
                    :pager-count="5"
                    :page-sizes="[10]"
                    :current-page="pager.current"
                    background
                    :page-size="pager.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pager.total"
            >
            </el-pagination>
        </el-card>
        <MechEqu ref="toRef" @fuzujian="closePop"/>
    </div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, ref, getCurrentInstance } from 'vue';

	import MechEqu from '/@/views/aiomember/component/MechEqu.vue';
	import { findAllAioEqu, delAioEqu } from '/@/api/equ.ts';
	import { useRoute } from 'vue-router';
	import { ElMessageBox } from 'element-plus';
	import AuthAll from '/@/components/auth/authAll.vue';
	import Auth from '/@/components/auth/auth.vue';

	export default {
		name: 'mech_equ',
		components: { Auth, AuthAll, MechEqu },
		setup() {

			const { proxy } = getCurrentInstance() as any;
			const route = useRoute();


			const toRef = ref();
			const state: any = reactive({
				pager: {
					records: [],
					total: 0,
					current: 1,
					size: 10,
					loading: false,
					parameter: '',
					parameters: {},

				},
			});
			// 初始化表格数据
			const initTableData = () => {
				findAllAioEqu(state.pager).then((res: any) => {
					state.pager.records = res.data.records;
					state.pager.total = res.data.total;

				});
			};
			const onRowUpdate = (row: object) => {
				toRef.value.openDialog(row);
			};
			// 当前行删除
			const onRowDel = (row: object) => {
				console.log(row);
				ElMessageBox.confirm('此操作将永久删除账号, 是否继续?', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(() => {
						console.log(row);
						let data = {
							equId: row.equId,
						};
						delAioEqu(data).then((res: any) => {
							initTableData();

						});

					})
					.catch(() => {
					});


			};
			// 分页改变
			const onHandleSizeChange = (val: number) => {
				state.pager.size = val;
				initTableData();
			};
			// 分页改变
			const onHandleCurrentChange = (val: number) => {
				state.pager.current = val;
				initTableData();
			};
			// 页面加载时
			onMounted(() => {
				console.log('====>>页面加载');
				initTableData();
			});

			const onRowAdd = () => {
				toRef.value.openDialog();


			};

			const closePop = () => {
				initTableData();

			};

			return {
				onRowUpdate,
				onRowDel,
				onHandleSizeChange,
				onHandleCurrentChange,
				...toRefs(state),

				toRef,
				findAllAioEqu,
				delAioEqu,
				onRowAdd,
				closePop,
			};
		},
	};
</script>

<style scoped lang="scss">
    .system-user-container {
        .system-user-search {
            text-align: right;
        }

        .system-user-photo {
            width: 40px;
            height: 40px;
            border-radius: 100%;
        }
    }

    .tools-warp-form-msg {
        color: #666666;
        font-size: 14px;

        .tools-warp-form-msg-red {
            color: red;
        }
    }
</style>
